Skip to content

feat(thread): show per-message To/Cc/Bcc recipients in thread view#12666

Open
sturlan wants to merge 6 commits intonextcloud:mainfrom
sturlan:feat/11305-thread-per-message-recipients
Open

feat(thread): show per-message To/Cc/Bcc recipients in thread view#12666
sturlan wants to merge 6 commits intonextcloud:mainfrom
sturlan:feat/11305-thread-per-message-recipients

Conversation

@sturlan
Copy link
Copy Markdown

@sturlan sturlan commented Mar 27, 2026 •
edited
Loading

Summary

Closes #11305, #9311, #4258.

Recipients (To, Cc, Bcc) are already returned by the API for every message
in a thread but were never displayed in ThreadEnvelope. This PR surfaces
them in the expanded message header using the existing RecipientBubble
component (which provides the NcPopover contact card with reply/copy/add
contact actions).

Also removes the aggregate participant bubble list from the thread header
(Thread.vue) per the design spec in #4258 — per-message recipients in
the expanded view replace that approach.

Prior attempt: #4315 (2021, closed 2023).

Changes

  • ThreadEnvelope.vue: render To/Cc/Bcc as RecipientBubble rows when
    message is expanded; show sender email only when expanded; apply
    --color-text-maxcontrast to sender name in expanded state
  • Thread.vue: remove aggregate participant bubble header; remove unused
    currentAccountEmail prop
  • MailboxThread.vue: remove unused :current-account-email binding

Test plan

  • Open a thread with multiple messages
  • Expand a message → To/Cc/Bcc rows appear with clickable bubbles
  • Collapse the message → recipient rows disappear
  • Click a recipient bubble → NcPopover opens (reply, copy email, add contact)
  • npm run test:unit — all 220 tests pass
  • npm run lint — no errors

AI-assisted: Claude Code (claude-sonnet-4-6)

sturlan added 4 commits March 27, 2026 13:22
@sturlan
feat(thread): show per-message To/Cc/Bcc recipients in thread view
8ae16ba 
Closes nextcloud#11305, nextcloud#9311, nextcloud#4258. Recipients (To, Cc, Bcc) are already
returned by the API for every message in a thread but were never
displayed in ThreadEnvelope. Add RecipientBubble components in the
expanded message header for each recipient list, following the same
pattern used for per-message subject-change display.

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
@sturlan
fix(thread): move recipient bubbles outside router-link to fix click …
240e40d 
…handling

RecipientBubble uses NcUserBubble which renders as an anchor tag.
Placing it inside the router-link's click handler caused navigation on
click instead of opening the contact popover. Move the recipients
section outside the router-link into its own envelope__recipients div.

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
@sturlan
feat(thread): match design spec from nextcloud#4258
4bdf004 
Per ChristophWurst's Sept 2023 design spec:
- Hide sender email address in collapsed message state
- Apply --color-text-maxcontrast to sender name when expanded
- Remove thread-level participant bubble header from Thread.vue
  along with all associated dead code (participantsToDisplay,
  moreParticipantsString, updateParticipantsToDisplay, resize
  listener, RecipientBubble/NcPopover imports)

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
@sturlan
fix(lint): fix all lint errors introduced by recipient display changes
98f2f88 
- Fix import order in ThreadEnvelope.vue (alphabetical: ConfirmationModal,
  Error, EventModal, RecipientBubble)
- Fix MessageLoadingSkeleton indentation (1 tab → 2 tabs)
- Remove extra blank lines in ThreadEnvelope.vue and Thread.vue CSS
- Fix SCSS unmatched brace in Thread.vue (leftover from avatar-header removal)
- Remove unused currentAccountEmail prop from Thread.vue and its
  corresponding binding in MailboxThread.vue

All 220 unit tests pass; webpack builds cleanly.

Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
@sturlan sturlan force-pushed the feat/11305-thread-per-message-recipients branch from 7330563 to 98f2f88 Compare March 27, 2026 12:22
ChristophWurst
ChristophWurst reviewed Mar 27, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@ChristophWurst ChristophWurst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the contribution!

Code looks good so far. Please provide before/after screenshots

src/components/ThreadEnvelope.vue
inset-inline-start: var(--default-grid-baseline);
}

.envelope__recipients {
Copy link
Copy Markdown
Member

@ChristophWurst ChristophWurst Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: this could be broken up into a nested scss structure

src/components/ThreadEnvelope.vue Outdated

.envelope__recipients {
padding-inline: 60px 38px;
padding-block: 4px;
Copy link
Copy Markdown
Member

@ChristophWurst ChristophWurst Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: magic numbers. ideally we can leverage the grid spacing var for this. See #9944.

@ChristophWurst ChristophWurst self-assigned this Mar 27, 2026
@sturlan
Copy link
Copy Markdown
Author

sturlan commented Mar 27, 2026 •
edited
Loading

Thank you for the contribution!

Code looks good so far. Please provide before/after screenshots

Thank you for the feedback. Here are the screenshots requested.
Before:
before
After:
after

@ChristophWurst
Copy link
Copy Markdown
Member

ChristophWurst commented Mar 27, 2026

Thanks 😎

Then I'm summoning our designer @nimishavijay for a quick design review :)

@sturlan
fix(thread): address review feedback on recipient CSS
7ba9c07 
- Nest .recipients inside .envelope__recipients (nested SCSS)
- Replace magic numbers (60px, 38px, 4px) with CSS variable expressions:
  padding-inline-start aligns with sender name via border-radius-container
  + avatar width (10 * grid-baseline) + gap (2 * grid-baseline);
  padding-inline-end mirrors the container border-radius;
  gaps and padding-block use --default-grid-baseline

Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
@sturlan sturlan force-pushed the feat/11305-thread-per-message-recipients branch from a44b2bd to 7ba9c07 Compare March 31, 2026 15:03
@nimishavijay
Copy link
Copy Markdown
Member

nimishavijay commented Apr 7, 2026

Sorry for the delay in response, but this is really cool! Something I would definitely use! My main concern with this is the space it's taking up. If I understood correctly, this information is shown all the time when the message is expanded, and it may not be relevant always. What do you think of the following changes to address that issue?

  • We don't show this by default, instead we have a small indication next to the recipient details like a chevron. Clicking on the recipient email or the chevron toggles showing this info
  • We use smaller user bubbles, with height as var(--clickable-area-small) (24px), remove the padding and add a border-radius-pill to make it rounded completely

Result would look something like this:

image

What do you think? :)

@sturlan
fix(thread): collapse recipients by default behind toggle chevron
33aba99 
Per reviewer feedback: hide To/Cc/Bcc by default; a chevron next to
the sender email toggles their visibility. Bubbles use 24px pill size.

- Extract senderEmail computed to avoid repeating envelope.from expression
- Simplify hasRecipients with optional chaining
- Add type="button" to toggle button

AI-assisted: Claude Code (claude-sonnet-4-6)
Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
@sturlan
Copy link
Copy Markdown
Author

sturlan commented Apr 7, 2026

What do you think? :)

I think it's a great idea. Here it the screenshot of the new design

Screenshot 2026-04-07 at 14-59-29 Mail - Nextcloud

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 11, 2026

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ChristophWurst ChristophWurst ChristophWurst left review comments

@GretaD GretaD Awaiting requested review from GretaD GretaD is a code owner

@kesselb kesselb Awaiting requested review from kesselb kesselb is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@ChristophWurst ChristophWurst

Labels

3. to review enhancement feedback-requested

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Display all recipients and basic information for each individual email in the email view.

3 participants

@sturlan @ChristophWurst @nimishavijay